<template>
  <div>
    <div v-show="!addressEditShow">
      <van-nav-bar title="地址列表" left-arrow @click-left="backPre" />
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        disabled-text="以下地址超出配送范围"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
    <address-edit
      ref="addressEdit"
      v-show="addressEditShow"
      @ok="handleSaveOk"
      @backPre="recieveEditBackPre"
    />
  </div>
</template>

<script>
import { AddressList, NavBar } from "vant";
import AddressEdit from "./addressEdit";
import { apiListAddress } from "@/api/order";
export default {
  name: "AddressList",
  components: {
    [AddressList.name]: AddressList,
    [AddressEdit.name]: AddressEdit,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      addressEditShow: false,
      chosenAddressId: "1",
      selectedAddress: {},
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
        }
      ]
    };
  },
  created() {},
  methods: {
    onAdd() {
      this.addressEditShow = true;
    },
    pushData(data) {
      const list = [];
      data.list.forEach(item => {
        list.push({
          id: item.id,
          name: item.receiver,
          tel: item.receiverMobile,
          address: item.receiverAddress
        });
      });
      this.list = list;
      this.selectedAddress = data.selectedAddress;
      this.chosenAddressId = data.selectedAddress.id;
    },
    onEdit(item, index) {
      console.log("onEdit", item, index);
      this.addressEditShow = true;
      const addressInfo = {
        id: "12313",
        name: "hello",
        tel: "18221339032",
        province: "天津市",
        city: "天津市",
        county: "和平区",
        addressDetail: "12313",
        areaCode: "120101",
        postalCode: "123421",
        isDefault: true
      };
      this.$refs.addressEdit.onEdit(addressInfo);
    },
    handleSaveOk() {
      this.addressEditShow = false;
      apiListAddress().then(res => {
        console.log(res);
        const list = [];
        res.data.forEach(item => {
          list.push({
            id: item.id,
            name: item.receiver,
            tel: item.receiverMobile,
            address: item.receiverAddress
          });
        });
        this.list = list;
      });
    },
    backPre() {
      this.$emit("backPre", this.selectedAddress);
    },
    recieveEditBackPre() {
      console.log("recieveEditBackPre");
      this.addressEditShow = false;
    }
  }
};
</script>

<style lang="less">
</style>
